import React from 'react';
import MyEchart from '../myEchart';
import jQuery from "jquery";

const globalConfig = require("../../js/globalConfig");
const utils = require("../../js/utils");

class Tc extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url: globalConfig.url + "/getTickCount",
            isMount: true,
            option: {
                legend: {
                    right: 20,
                    data: ["主井勾数", "副井勾数"]
                },
                tooltip: {
                    trigger: 'axis'
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        name: "小时(h)",
                    }
                ],
                yAxis: [
                    {
                        name: "勾数(勾)",
                        type: 'value',
                    }
                ],
                series: [
                    {
                        name: "主井勾数",
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#ff7875',
                                lineStyle: {
                                    color: '#ff7875'
                                }
                            }
                        }
                    },
                    {
                        name: "副井勾数",
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#91cc75',
                                lineStyle: {
                                    color:"#91cc75"
                                }
                            }
                        }
                    }
                ],
                grid: {
                    top: 35,
                    left: 40,
                    right: 60,
                    bottom: 25
                }
            },
        }
    }

    componentDidMount() {
        const instance = this.myEchart.echartsReact.getEchartsInstance();
        //用于查询时的放大页面
        if (this.props.option) {
            instance.setOption(this.props.option);
        }
        this.timerID = setInterval(() => {
            var this_ = this;
            if (this.state.isMount) {
                jQuery.ajax({
                    url: this_.state.url,
                    dataType: "JSON",
                    type: "POST",
                    data: {},
                    success: function (result) {
                        var mainData = result.mainData;
                        var subData = result.subData;
                        var xData = [];
                        var yData_m = [];
                        var yData_s = [];

                        var hour = new Date().getHours();
                        for (var i = 0; i < 24; i++) {
                            var time = hour - (23 - i);
                            time = time >= 0 ? time : 24 + time;
                            xData.push(utils.formatData(time));
                            yData_m.push("0");
                            yData_s.push("0");
                        }

                        yData_m = utils.upDateData(mainData, xData, yData_m);
                        yData_s = utils.upDateData(subData, xData, yData_s);

                        instance.setOption({
                            xAxis: { data: xData },
                            series: [
                                { data: yData_m },
                                { data: yData_s }
                            ]
                        });
                    }
                });
            }
        }, 1000);
    }
    componentWillUnmount() {
        this.setState({ isMount: false });
        clearInterval(this.timerID);
    }
    render() {
        return (
            <MyEchart ref={e => { this.myEchart = e; }} option={this.state.option}/>
        );
    }
}

export default Tc;